<template>
	<view class="page" :style="{'min-height':h+'px','padding-top':(mt)+'px'}">
		<c-nav-bar :title="title"></c-nav-bar>
		<view class="image">
			<image src="https://i.ringzle.com/file/20240617/1e811ca0adf045f28c7201fff3530b2e.png" mode=""></image>
		</view>
		<view class="from">
			<view class="from-name">
				<view class="name">
					<text style="color: #FF4141; margin: 0 6rpx;">*</text> <text>您的姓名</text>
				</view>
				<view class="name-input">
					<input type="text" placeholder="请输入姓名" v-model="fromData.name" />
				</view>
			</view>
			<view class="from-name">
				<view class="name">
					<text style="color: #FF4141; margin: 0 6rpx;">*</text> <text>您的性别</text>
				</view>
				<view class="sex">
					<text class="sex-left" v-for="(item,index) in list" @click="sex(item,index)"
						:class="indexdb==index?'actived':''">
						{{item.name}}
					</text>

				</view>
			</view>
			<view class="from-name">
				<view class="name">
					<text style="color: #FF4141; margin: 0 6rpx;">*</text> <text>出生年月</text>
				</view>
				<view class="name-input">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input">{{date}}</view>
					</picker>
				</view>
			</view>
			<view class="from-name">
				<view class="name">
					<text style="color: #FF4141; margin: 0 6rpx;">*</text> <text>您的手机号</text>
				</view>
				<view class="name-phone">
					<view class="phone">
						<input placeholder="请输入手机号" maxlength="11" v-model="fromData.phone"></input>
					</view>
				</view>
			</view>
			<view class="from-At-last">
				<view class="name">
					<view>最高学历</view>
					<view>工作时间</view>
				</view>
				<view class="name-input" @click="show=true">
					<view>{{Degreetext}}</view>
					<view>{{choosetext}}</view>
				</view>
				<view class="btn">
					<image src="https://i.ringzle.com/file/20240617/3fa8575e9a0c4e63ac5c6d4d4803c163.png"
						mode="aspectFill"></image>
				</view>
			</view>
		</view>


		<view class="btn-btn" @click="application">
			<view class="btn">
				申请职位
			</view>
		</view>
		<!-- 选择弹框 -->
		<u-popup :show="show" @close="close" :round="24" @open="open">
			<view class="pop">
				<view class="hander">
					<view class="left" @click="show=false">
						取消
					</view>
					<view class="center">
						选择您的{{titles}}
					</view>
					<view class="right" @click="show=false">
						确定
					</view>
				</view>
				<view class="middle">
					<view class="left" @click="middle(1)" :class="{ 'active': key == 1 }">
						<view class="left-one">
							最高学历
						</view>
						<view class="left-two">
							{{Degrees}}
						</view>
					</view>
					<view class="right" @click="middle(2)" :class="{ 'active': key == 2 }">
						<view class="right-one">
							工作时间
						</view>
						<view class="right-two">
							{{chooses}}
						</view>
					</view>
				</view>

				<view class="At-last" v-show="key==1" v-for="item,index in collegeList">
					<view class="item" @click="Degree(item,index)" :class="indexDb==index?'activeItem':''">
						{{item.name}}
					</view>
				</view>
				<view class="At-last" v-show="key==2" v-for="item,index in JobList">
					<view class="item" @click="choose(item,index)" :class="indexDb==index?'activeItem':''">
						{{item.name}}
					</view>
				</view>

			</view>
		</u-popup>
	</view>

</template>

<script>
	//出生日期
	function getDate(type) {
		const date = new Date();

		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();

		if (type === 'start') {
			year = year - 100;
		} else if (type === 'end') {
			year = year + 100;
		}
		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;

		return `${year}-${month}-${day}`;


	}

	export default {

		data() {
			return {
				title: '填写订单',
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				tips: '获取验证码',
				// refCode: null,
				seconds: 10,
				list: [{
						name: '先生',
						key: 1
					},
					{
						name: '女士',
						key: 0
					}
				],

				fromData: {
					name: '', //姓名
					phone: '', //	联系电话
					recruitId: null, //	招聘信息id
					sex: '', //性别 0女 1男
					education: '', //学历
					birthYear: '', //出生年份
					workingHours: '', //工作时长
					bossName: '', //	boss姓名
					bossPhone: '', //	boss电话
					money: '', //工资
					workName: '', //工作职位
					userId: '', //bossid
					address: '', //地址
					// money:'',//

				},
				collegeList: [{
						name: '高中',
					},
					{
						name: '中专/技校',
					},
					{
						name: '大专',
					},
					{
						name: '本科',
					},
					{
						name: '硕士',
					}
				],
				JobList: [{
						name: '1-2年',
					},
					{
						name: '2-3年',
					},
					{
						name: '3年以上',
					},
					{
						name: '无经验',
					}
				],
				//出生日期
				date: getDate({
					format: true
				}),
				startDate: getDate('start'),
				endDate: getDate('end'),
				show: false,
				key: 1,
				indexDb: null,
				Degrees: '大专',
				chooses: '1年以上',
				titles: '最高学历',
				Degreetext: '请选择',
				choosetext: '请选择',
				indexdb: null


			}
		},

		onLoad(option) {
			let obj = JSON.parse(option.obj)
			this.fromData.recruitId = obj.id
			this.fromData.bossName = obj.bossName
			this.fromData.bossPhone = obj.bossPhone
			// this.fromData.userId = obj.userId
			this.fromData.bossId = obj.bossId
			this.fromData.money = obj.money
			this.fromData.workName = obj.positionName
			this.fromData.address = obj.address

		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			change(e) {},
			// 选择性别
			sex(item, index) {
				this.fromData.sex = item.key
				this.indexdb = index
			},
			//日期回调
			bindDateChange(e) {
				this.date = e.detail.value
				this.fromData.birthYear = e.detail.value
			},
			// 申请职位
			application() {

				if (uni.getStorageSync('userInfo') == '') {
					this.$login().then(res => {
						if (res !== 0) {
							this.$refs['phoneNumber'].show = true;
						}
					})
				} else {

					if (!this.fromData.name) return this.$showToast('请填写姓名');
					if (!this.fromData.sex) return this.$showToast('请选择性别');
					if (!this.fromData.birthYear) return this.$showToast('请选择出生日期');
					if (!this.$reg.mobile(this.fromData.phone)) return this.$showToast('请填写正确的手机号');
					if (!this.fromData.education) return this.$showToast('请选择学历');
					if (!this.fromData.workingHours) return this.$showToast('请选择工作时长');

					let newData = JSON.parse(JSON.stringify(this.fromData));
					newData.name = this.$aesTm.encrypt(newData.name);
					newData.phone = this.$aesTm.encrypt(newData.phone);
					newData.bossPhone = this.$aesTm.encrypt(newData.bossPhone);
					this.$api.post('/api/commrecruit/savePosition', newData).then(res => {
						if (res.data.code == 0) {
							this.$showToast('申请成功');
							setTimeout(function() {
								uni.navigateBack();
							}, 2000);

						} else this.$showToast('申请失败');

					})
				}
			},
			open() {},

			close() {
				this.show = false
			},
			// 选择 tab切换学历 工作时间
			middle(e) {
				this.key = e
				if (e == 1) {
					this.titles = '最高学历'
				}
				if (e == 2) {
					this.titles = '工作时间'
				}
			},
			// 选择工作时间
			choose(item, index) {
				this.fromData.workingHours = item.name
				this.indexDb = index
				this.chooses = item.name
				this.choosetext = item.name
			},
			// 选择学历
			Degree(item, index) {
				this.fromData.education = item.name
				this.indexDb = index
				this.Degrees = item.name
				this.Degreetext = item.name
			}




		}
	}
</script>


<style lang="scss">
	.page {
		padding: 0;
		margin: 0;
	}

	.image {
		width: 100vw;
		height: 214rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.from {
		padding: 30rpx;

		.from-name {
			text-align: center;
			border-bottom: 1rpx solid #EFEFEF;
			font-size: 30rpx;

			.name {
				margin-top: 24rpx;
			}

			.name-input {
				padding: 24rpx 0 30rpx;
			}

			.sex {
				display: flex;
				text-align: center;
				margin: 24rpx 170rpx 24rpx 220rpx;

				.sex-left {
					margin-right: 20rpx;
					display: block;
					width: 120rpx;
					height: 64rpx;
					line-height: 64rpx;
					background-color: #F1F3F4;
					border-radius: 50rpx;
				}

				.sex-right {
					display: block;
					line-height: 64rpx;
					width: 120rpx;
					height: 64rpx;
					background-color: #F1F3F4;
					border-radius: 50rpx;
				}
			}

			.name-phone {
				padding: 24rpx 0 30rpx;

				.phone {
					display: flex;
					margin: 0 180rpx;
				}
			}


		}

		.from-At-last {
			text-align: center;
			// border-bottom: 1rpx solid #EFEFEF;
			font-size: 30rpx;

			.name {
				margin: 24rpx 140rpx;
				display: flex;
				justify-content: space-between;
				color: #007A69;
			}

			.name-input {
				margin: 24rpx 140rpx 0;
				display: flex;
				justify-content: space-between;
				color: #88919D;
				font-size: 36rpx
			}

			.btn {
				width: 690rpx;
				height: 7rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

	}

	.btn-btn {
		position: fixed;
		bottom: 0;
		// background-color: aqua;
		width: 100vw;
		height: 88rpx;
		padding: 24rpx;

		.btn {
			width: 94%;
			height: 100%;
			border-radius: 50rpx;
			text-align: center;
			line-height: 88rpx;
			background-color: #007A69;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}

	.pop {
		height: 665rpx;
		border-radius: 24rpx 24rpx 0 0;

		.hander {
			box-sizing: border-box;
			height: 113rpx;
			line-height: 113rpx;
			padding: 0 31rpx;
			display: flex;
			justify-content: space-between;

			.left {
				font-weight: Regular;
				font-size: 32rpx;
				color: #999999;
			}

			.right {
				font-weight: Regular;
				font-size: 32rpx;
				color: #007A69;
			}

			.center {
				font-weight: Bold;
				font-size: 32rpx;
				color: #1C1E41;
			}

		}

		.middle {
			box-sizing: border-box;
			width: 100%;
			// height: 136rpx;
			border-top: 1rpx solid #EFEFEF;
			border-bottom: 1rpx solid #EFEFEF;
			display: flex;
			// justify-content: space-around;
			text-align: center;

			.left {
				flex: 1;
				// background-color: aqua;

				.left-one {
					margin-top: 36rpx;
					font-weight: Regular;
					font-size: 26rpx;
					color: #88919D;
				}

				.left-two {
					margin-top: 24rpx;
					font-weight: Bold;
					font-size: 32rpx;
					color: #1C1E41;
					margin-bottom: 18rpx;
				}
			}

			.right {
				flex: 1;
				// background-color: antiquewhite;

				.right-one {
					margin-top: 36rpx;
					font-weight: Regular;
					font-size: 26rpx;
					color: #88919D;
				}

				.right-two {
					margin-top: 24rpx;
					font-weight: Bold;
					font-size: 32rpx;
					color: #1C1E41;
					margin-bottom: 18rpx;
				}
			}
		}

		.At-last {
			font-size: 36rpx;
			color: #1C1E41;
			font-weight: Bold;
			text-align: center;
			margin: 0 auto;

			.item {
				margin: 0 auto;
				height: 80rpx;
				line-height: 80rpx;
				width: 670rpx;
				border-radius: 24rpx;
			}
		}

	}

	.active {
		box-sizing: border-box;
		border-top: 4rpx solid #007A69 !important;
		// background-color: ;
		background-image: linear-gradient(to bottom, #F0FBFF, #FFFFFF) !important;
	}

	.activeItem {
		background-color: #F5F8FA;
	}

	.actived {
		background-color: #E4F4FF !important;
		color: #007A69 !important;
	}
</style>